<template>
  <div>
      <div class="cz">
        <!-- 基础信息 -->
        <div name="基础信息">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h3>基础信息</h3>
            </div>
            <!-- 主体 -->
            <div name="主体">
              <el-form
                :inline="true"
                class="demo-form-inline"
                ref="form"
                :model="form"
                label-width="80px"
              >
                <el-form-item label="入库单号">
                  <el-input class="kuan1" @blur="RKDH" readonly v-model="rkdh"></el-input>
                </el-form-item>

                <el-form-item class="kuan2" label="入库类型">
                  <el-select
                    v-model="form.rklx"
                    clearable
                    placeholder="请选择"
                    :style="{ width: '300px' }"
                  >
                    <el-option label="进货入库" value="进货入库"></el-option>
                    <el-option label="生产入库" value="生产入库"></el-option>
                    <el-option label="退货入库" value="退货入库"></el-option>
                    <el-option label="换货入库" value="换货入库"></el-option>
                    <el-option label="借入入库" value="借入入库"></el-option>
                    <el-option label="损耗入库" value="损耗入库"></el-option>
                    <el-option label="样品入库" value="样品入库"></el-option>
                    <el-option label="盘盈入库" value="盘盈入库"></el-option>
                    <el-option label="调拨入库" value="调拨入库"></el-option>
                    <el-option label="受赠入库" value="受赠入库"></el-option>
                    <el-option label="初期入库" value="初期入库"></el-option>
                    <el-option label="其他入库" value="其他入库"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item class="kuan2" label="仓库名称">
                  <el-select
                    v-model="form.ware_code"
                    clearable
                    placeholder="请选择"
                    :style="{ width: '300px' }"
                    @change="kuweixlk"
                  >
                    <el-option v-for="item in ckxlk" :key="item.ware_code" :label="item.ware_name" :value="item.ware_code"></el-option>
                  </el-select>
                </el-form-item>
  
                <el-form-item class="kuan2" label="入库日期">
                  <el-date-picker
                    class="kuan1"
                    v-model="form.rkrq"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="关联单号" prop="buy_code" class="vv">
                  <el-input v-model="form.buy_code" :readonly="isreadonly" @click.native="gldh()" class="kuan1"></el-input>
                  <el-checkbox v-model="form.checked" @change="inoutgldh()">关联进货单号</el-checkbox>
                </el-form-item>
  
                <el-form-item label="供应商">
                  <el-select
                    v-model="form.gysbh"
                    @change="GYSTjSelect()"
                    clearable
                    placeholder="请选择"
                    :style="{ width: '300px' }"
                    :disabled="isDisabled"
                  >
                    <el-option
                      v-for="item in Adate"
                      :key="item.supply_code"
                      :label="item.supply_name"
                      :value="item.supply_code"
                    >
                    </el-option>
                  </el-select>
                  <el-link
                    style="margin-left: 15px"
                    type="success"
                    :underline="false"
                    >设置</el-link
                  >
                </el-form-item>
  
                <el-form-item style="margin-left: 76px" label="联系人">
                  <el-input
                    class="kuan1"
                    :disabled="true"
                    v-model="lxr"
                  ></el-input>
                </el-form-item>
  
                <el-form-item label="联系方式">
                  <el-input
                    class="kuan1"
                    :disabled="true"
                    v-model="lxfs"
                  ></el-input>
                </el-form-item>
  
                <el-form-item class="kuan2" label="经办人">
                  <el-select
                    v-model="form.inbill_duty_man"
                    clearable
                    placeholder="请选择经办人"
                    :style="{ width: '300px' }"
                  >
                    <el-option label="张三" value="张三"></el-option>
                    <el-option label="李四" value="李四"></el-option>
                    <el-option label="王五" value="王五"></el-option>
                    <el-option label="赵六" value="赵六"></el-option>
                  </el-select>
                </el-form-item>
  
                <el-form-item label="备注">
                  <el-input
                    class="kuan1"
                    :autosize="{ minRows: 6, maxRows: 10 }"
                    placeholder="请输入内容"
                    style="width: 800px"
                    type="textarea"
                    v-model="form.desc"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
        <!-- 基础信息 -->
  
        <!-- 进货明细 -->
        <div name="进货明细">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h3>进货明细</h3>
            </div>
            <!-- 主体 -->
            <div name="主体">
              <!-- 按钮 -->
              <div class="grid-content bg-purple">
                <div style="margin-bottom: 10px">
                  <el-button type="success" @click="TjCha()">添加</el-button>
                  <el-button @click="handleClick">移除</el-button>
                </div>
              </div>
  
              <!-- 主体 -->
              <div>
                <el-table
                  :data="BDate"
                  border
                  ref="myTable"
                  height="250"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"> </el-table-column>
  
                  <el-table-column prop="id" label="序号"> </el-table-column>
  
                  <el-table-column prop="item_code" label="货品编号">
                  </el-table-column>
                  <el-table-column prop="item_name" label="货品名称">
                  </el-table-column>
                  <el-table-column prop="item_type_name" label="货品类型" width="150">
                  </el-table-column>
                  <el-table-column prop="model_code" label="规格型号" width="115">
                  </el-table-column>
                  <el-table-column prop="unit" label="单位" width="115">
                  </el-table-column>
                  <el-table-column prop="buy_num" label="进货数量" width="120">
                  </el-table-column>
                  <el-table-column prop="inbill_num" label="已入库数量" width="120">
                  </el-table-column>
                  <el-table-column prop="weiRK" label="未入库数量" width="120">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.weiRK" readonly></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="kuwei" label="入库仓位" width="120">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.kuwei" placeholder="请选择">
                          <el-option v-for="item in kw" :key="item.area_code" :label="item.area_name" :value="item.area_code">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="rksl" label="本次入库数量" width="120">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.rksl" v-on:blur="number_change(scope.row)"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="buy_price" label="进货单价" width="120">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.buy_price"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="jinhje" label="进货金额" width="120">
                      <template slot-scope="scope">
                        {{ scope.row.jhje}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="scrq" label="生产日期" width="160">
                      <template slot-scope="scope">
                        <el-date-picker v-model="scope.row.scrq" type="date" placeholder="选择日期" style="width:130px;">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                      <template slot-scope="scope">
                        <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">移除</el-button>
                      </template>
                    </el-table-column>
  
                </el-table>
              </div>
              <div style="float: right">
                <el-button @click="GuanBi()">关闭</el-button>
                <el-button @click="BaoCun()">保存并新增</el-button>
                <el-button @click="BaoCun1()" type="success">保存</el-button>
              </div>
            </div>
          </el-card>
        </div>
        <!-- 进货明细 -->
      </div>
      <el-dialog title="选择进货单" :visible.sync="XzjhdialogFormVisible">
          <div style="float: left">
            <el-input v-model="jhdh" placeholder="请输入进货单号" style="width: 190px; margin-right: 10px"></el-input>
            <el-select v-model="djzt" clearable placeholder="请选择单据状态" style="width: 190px; margin-right: 10px">
              <el-option label="未入库" value="4"></el-option>
              <el-option label="部分入库" value="5"></el-option>
            </el-select>
            <el-select v-model="gldhgys" clearable placeholder="请选择供应商"
              style="width: 190px; margin-right: 120px; margin-bottom: 10px">
              <el-option v-for="item in Adate" :key="item.supply_code" :label="item.supply_name" :value="item.supply_code">
              </el-option>
            </el-select>
            <el-input v-model="jhr" placeholder="请输入进货人" style="width: 190px; margin-right: 520px"></el-input>
            <!-- <el-input v-model="jhbm" placeholder="请输入进货部门" style="width: 190px; margin-right: 10px"></el-input> -->
            <!-- <el-date-picker v-model="jhrq" type="date" placeholder="请选择进货日期" style="width: 190px; margin-right: 120px"></el-date-picker> -->
            <!-- <el-date-picker
              v-model="jhrq"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 190px; margin-right: 120px">
            </el-date-picker> -->
          </div>
          <div style="float: right; margin-bottom: 20px">
            <el-button @click="cz()" size="mini" plain>重置</el-button>
            <el-button @click="mhselect()" size="mini" type="success">查询</el-button>
          </div>
          <el-table :data="tableData" @row-click="handleRadioChange" :row-key="row => row.id"
            header-cell-style="background-color: #F5F5F5;color:#191919;height:30px;padding:0px;font-size: 14px;font-family:'宋体';"
            class="table table-bordered" :cell-style="{ color: '#191919', background: '#FFF' }">
            <el-table-column label="序号">
              <template slot-scope="{ row }">
                <el-radio v-model="selectedRow" :label="row.id"></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="buy_code" label="进货单号" width="120">
            </el-table-column>
            <el-table-column prop="sure_state" label="单据状态" width="155">
              <template slot-scope="scope">
                <el-tag type="success" plain v-if="scope.row.sure_state == 4">未入库</el-tag>
                <el-tag type="primary" plain v-if="scope.row.sure_state == 5">部分入库</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="buy_date" label="进货日期" width="150">
            </el-table-column>
            <el-table-column prop="supply_name" label="供应商" width="115">
            </el-table-column>
            <!-- <el-table-column prop="chanLinkTel" label="进货部门" width="160">
            </el-table-column> -->
            <el-table-column prop="buy_man" label="进货人" width="120">
            </el-table-column>
            <el-table-column prop="shu" label="货品数量" width="120">
            </el-table-column>
            <el-table-column prop="jia" label="进货金额" width="120">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.dqy"
            :page-sizes="[4, 8, 12, 16]" :page-size="this.mys" layout="total, sizes, prev, pager, next, jumper"
            :total="this.zts">
          </el-pagination>
          <div style="float: right">
            <el-button @click="qx()" size="mini" plain>取消</el-button>
            <el-button @click="qd()" size="mini" type="success">确定</el-button>
          </div>
        </el-dialog>

      <el-dialog title="添加货品" :visible.sync="dialogVisible" width="45%">
        <div style="margin-bottom: 15px;margin-left: -500px;">
            进货单号:{{ this.hpzjhdh }}
          </div>
        <div>
          <el-card class="box-card1">
            <div>
              <!-- 头部 -->
              <el-form :inline="true" class="demo-form-inline">
                <el-input
                  style="width: 200px"
                  v-model="tj"
                  placeholder="请输入货品编号/名称"
                ></el-input>
                <el-select v-model="dw" placeholder="请选择单位" style="width:200px;">
                  <el-option label="吨" value="吨"></el-option>
                  <el-option label="块" value="块"></el-option>
                  <el-option label="根" value="根"></el-option>
                  <el-option label="台" value="台"></el-option>
                </el-select>
  
                <el-form-item class="block">
                  <el-button @click="Qing()">重置</el-button>
                  <el-button type="success" @click="dj()">查询</el-button>
                </el-form-item>
              </el-form>
  
              <!-- 头部 尾 -->
              <el-table
                :data="Cdate"
                ref="MyDate"
                border
                height="250"
                @select="handleSelection"
                style="width: 100%"
              >
                <el-table-column fixed type="selection" width="55" />
                <el-table-column fixed width="50" label="序号" prop="id" />
                <el-table-column fixed prop="item_code" label="货品编号" />
                <el-table-column fixed prop="item_name" label="货品名称" />
                <el-table-column fixed prop="model_code" label="规格型号" />
                <el-table-column fixed prop="unit" label="单位" />
                <el-table-column fixed prop="buy_price" label="进货单价" />
                <el-table-column fixed prop="buy_num" label="进货数量" />
                <el-table-column fixed prop="jhje" label="进货金额" />
                <el-table-column fixed prop="inbill_num" label="已入库" />
                <el-table-column fixed prop="weiRK" label="未入库" />
              </el-table>
            </div>
          </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="hpxxhq()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import $http from '@/http/base.js';
export default {
  data(){
    return {
      form:{
      },
      rkdh:"",//入库单号
      ckxlk:[],//仓库下拉框
      gysbh:[],//供应商
      isreadonly:false,//关联单号
      isDisabled:false,//供应商
      XzjhdialogFormVisible: false,//进货单选择
      lxr: "",//联系人文本
      lxfs: "",//联系方式
      Adate:[],
      BDate:[],
      BDate1:[],
      bz:"",//备注
      jhdh:"",//关联单号中进货单号
      djzt:"",//单据状态
      gldhgys:"",//关联单号供应商
      jhr:"",//关联单号进货人
      tableData:[],
      mys: 4,//每页数
      dqy: 1,//当前页
      zts: 0,//总条数
      dialogVisible:false,//添加货品弹框
      hpzjhdh:"",//添加货品进货单号
      tj:"",//添加货品条件查
      dw:"",//单位
      Cdate:[],//添加货品数据集合
      kw:[],//库位
      ckbh:"",
    }
  },
  methods:{
    //入库单号拼接
    RKDH(){
      this.getCurrentTime();
      this.rkdh = "RKDH" + this.currenTime2 + "001";
    },
    //仓库下拉框
    CKSelect(){
      $http
      .get('api/Wh_Inbill_h/CKXLKSelect')
            .then(res =>{
              this.ckxlk = res
              this.ckbh = res.ware_code
              console.log(this.Adate)
            })
            .catch(err =>{
              console.log(err)
            })
    },
    //获取当前时间
    getCurrentTime(){
      const date = new Date();
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);

      this.currenTime = `${year}${month}${day}${hours}${minutes}`;
      this.currenTime1 = `${year}-${month}-${day}`;
      this.currenTime2 = `${year}${month}${day}`;
    },
    //复选框改变事件
    inoutgldh() {
      if (this.adrk.checked == true) {
        this.isDisabled = true;
        this.isreadonly = true;
        this.form.supply_code = "";
        this.form.link_man = "";
        this.form.link_way = "";
        this.form.buy_code = "";
      }
      if (this.form.checked == false) {
        this.isDisabled = false;
        this.isreadonly = false;
      }
    },
    //关联单号弹框
    gldh() {
      if (this.form.checked == true) {
        this.XzjhdialogFormVisible = true;
      }
      if (this.form.checked == false) {
        this.XzjhdialogFormVisible = false;
      }
    },
    //供应商下拉框
    GYSSelect(){
        $http
            .get('api/wh_Buy_Order_h/GYSXlkSelect')
            .then(res =>{
              this.Adate = res
              console.log(this.Adate)
            })
            .catch(err =>{
              console.log(err)
            })
    },
    //根据供应商下拉框查询联系人和联系方式
    GYSTjSelect(){
      $http
          .get('api/wh_Buy_Order_h/GYSTjSelect?tj='+this.form.gysbh)
          .then(res =>{
            //联系人
            this.lxr = res.link_man
            //联系方式
            this.lxfs = res.link_tel
          })
          .catch(err =>{
            console.log(err)
          })
    },
    //添加弹框
    TjCha(){
      this.dialogVisible = true;
      this.hpxxchaxun();
    },
    //根据进货单号查商品
    hpxxchaxun(){
      $http
          .get('api/Wh_Inbill_h/JHDHchahpxx?buy_code='+"JHDH20240410001 ")
          .then(res =>{
            this.Cdate = res
          })
          .catch(err =>{
            console.log(err)
          })
    },
    //库位下拉框查询
    kuweixlk() {
      $http
        .get("api/Wh_Inbill_h/SelectArea?ware_code="+this.form.ware_code)
        .then((res) => {
          console.log(this.form.ware_code)
          console.log("库位信息")
          console.log(res);
          this.kw = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSelection(selection){
      this.BDate1 = selection;
      console.log(selection)
    },
    //货品信息获取 按钮
    hpxxhq() {
      this.BDate = [];
      this.BDate = this.BDate1;
      this.dialogVisible = false;
    },
    //移除
    handleClick(){

    },
    //获取信息
    handleSelectionChange(val) {
      this.selectedItems = val.map((row) => ({
        ...row,
        buy_price: row.buy_num * row.inbill_price, // 计算 buy_price 和 inbill_price 的乘积作为 amount
        buy_num: row.buy_num,
      }));
      console.log("表单选中信息：" + JSON.stringify(this.selectedItems)); // 这里的 val 就是选中的行数据1
    },
    handleRadioChange(){

    },
    //条数改变
    handleSizeChange(val) {
      this.mys = val;
      this.cha();
    },
    //页数改变
    handleCurrentChange(val) {
      this.dqy = val;
      this.cha();
    },
    //保存
    BaoCun(){
      this.getCurrentTime();
      this.ShiJIan(this.form.jhrq);
      console.log(this.jhdh)
      console.log("选中的信息")
      console.log(this.selectedItems)
      $http
        .post('api/wh_Buy_Order_h/Insert',{
          jhzb:{
            buy_code: this.jhdh,
            buy_date: this.form.jhrq,
            supply_code: this.form.gysbh,
            link_man: this.lxr,
            link_way: this.lxfs,
            buy_man: this.form.jhr,
            create_by: this.create_by,
            create_time: this.currenTime1,
            remark: this.form.desc,
          },
          jhmxs:this.selectedItems,
        })
        .then(res =>{
          this.TiShiCG('增加')
          console.log(res)
        })
        .catch(err =>{
          this.TiShiSB('增加')
        })
    },
    GuanBi(){
      this.$router.push({
        path:"/RKGL_SelectZB" //跳转的页面
      })
    },
  },
  mounted(){
    this.RKDH()
    this.GYSSelect()
    this.CKSelect()
    this.kuweixlk()
  }
}
</script>

<style>

</style>